<template>
    <TopBackgroundArea :topBack="topBack"/>
    <Declare :declareData="declareData"/>
    <RecruitmentTips/>
    <BottomDeclares/>
</template>

<script setup>
import TopBackgroundArea from "@/views/Careers/components/TopBackgroundArea.vue";
import {reactive} from "vue";
import Declare from "@/views/Careers/components/Declare.vue";
import RecruitmentTips from "@/views/Careers/components/joining/RecruitmentTips.vue";
import BottomDeclares from "@/views/Careers/components/joining/BottomDeclares.vue";

const topBack = reactive({
    title: 'Joining Supercell',
    description: 'What to expect when becoming part of our team.',
    pic: '/src/assets/img/careers/joining/topBack.webp',
    opacity: 1
})

const declareData = reactive({
    description: '<h1>How we hire</h1>' +
        '<p>We believe in fostering a culture of independence and trust. One way that we do this at Supercell is by staying small as it minimizes the amount of bureaucracy and processes while maximizing room for innovation. Our teams are nimble, experimenting with new features and failing smarter to maximize learning. We are constantly looking for proactive doers who strive in this environment to create the best games.</p>' +
        '<p>Our focus is on ensuring potential hires are a great fit. We also want to give you a clear understanding of what it would be like to work here. You\'ll get to meet many people during the process and get interviewed across several different teams.</p>' +
        '<p>We truly appreciate you taking the step of, and time to, apply to work at Supercell. We hope this is the right opportunity for you!</p>',
    pic: '/src/assets/img/careers/joining/rightHero02.webp'
})
</script>

<style scoped>
h1 {
    height: 300px;
    background-color: lightblue;
    padding: 200px;
}
</style>